
body{
 background: url(../images/bg.jpg) no-repeat;
 background-position: top;
}
$blue:skyblue;
.container {
    width: 100%;
   
    .box {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: center;

        .bg{
            width: 80%;
            margin: 0 auto;
            margin-top: 50px;
           background-color: rgba(0, 0, 0, 0.5);
           border-radius: 10px;
           overflow: hidden;
        }
        h1 {
            padding-top: 50px;
            color: #FFF;
            font-size: 36px;
        }

        .level {
            padding: 20px 0;

            .grade {
                width: 30%;
                margin: 25px auto;
                height: 50px; 
                line-height: 50px;
                border: 1px solid #fff;
                border-radius: 10px;
                overflow: hidden;
                background-color: #fff;
                box-shadow: 2px 2px 2px #ccc;
                color:#2b2b2b;

                &:hover {
                    background-color: $blue;
                    border: 1px solid$blue;
                    box-shadow: 2px 2px 2px $blue;
                    color: #FFF;
                    cursor: pointer;
                }
            }


        }
    }
}
